<template>
  <el-dialog
    title="查看参赛学员"
    :close-on-click-modal="false"
    :visible.sync="visible">
    <avue-crud ref="crud"
               :page="page"
               :data="dataList"
               :option="tableOption"
               @search-change="searchChange">
      <template slot-scope="scope"
                slot="isCost">
        <el-select v-model="scope.row.isCost" placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </template>
      <template slot-scope="scope"
                slot="gameScore">
          <el-input v-model="scope.row.gameScore" placeholder="请输入赛事得分"></el-input>
      </template>
      <template slot-scope="scope"
                slot="gameLevel">
          <el-input v-model="scope.row.gameLevel" placeholder="请输入赛项等级"></el-input>
      </template>
      <template slot-scope="scope"
                slot="menu">
        <el-button type="primary"
                   icon="el-icon-edit"
                   size="small"
                   @click.stop="addOrUpdateHandle(scope.row)">确认编辑</el-button>
        <el-button type="danger"
                   icon="el-icon-delete"
                   size="small"
                   @click.stop="deleteHandle(scope.row.id)">删除</el-button>
      </template>
    </avue-crud>
    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">关闭</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { tableOption } from '@/crud/event/student-table'
  export default {
    data () {
      return {
        visible: false,
        dataList: [],
        dataListLoading: false,
        tableOption: tableOption,
        page: {
          total: 0, // 总页数
          currentPage: 1, // 当前页数
          pageSize: 10 // 每页显示多少条
        },
        id: '',
        options: [
          { value: 0, label: '未购买' },
          { value: 1, label: '已购买' },
        ],
      }
    },
    methods: {
      init (id) {
        this.id = id || 0
        this.visible = true
        this.$nextTick(() => {
          if (this.id) {
            this.getDataList()
          }
        })
      },
      // 获取数据列表
      getDataList (page, params) {
        this.dataListLoading = true
        this.$http({
          url: this.$http.adornUrl(`/game/student/page`),
          method: 'get',
          params: this.$http.adornParams(
            Object.assign(
              {
                current: page == null ? this.page.currentPage : page.currentPage,
                size: page == null ? this.page.pageSize : page.pageSize,
                gameId: this.id
              },
              params
            )
          )
        }).then(({ data }) => {
          this.dataList = data.records
          this.page.total = data.total
          this.dataListLoading = false
        })
      },
      // 条件查询
      searchChange (params) {
        this.getDataList(this.page, params)
      },
      // 确认编辑
      addOrUpdateHandle (data) {
        let dataForm = {}
        dataForm.id = data.id
        dataForm.isCost = data.isCost
        dataForm.gameScore = data.gameScore
        dataForm.gameLevel = data.gameLevel
        this.$http({
          url: this.$http.adornUrl('/game/student'),
          method: 'put',
          data: this.$http.adornData(dataForm)
        }).then(({ data }) => {
          this.$message({
            message: '操作成功',
            type: 'success',
            duration: 1500,
            onClose: () => {
              this.getDataList()
            }
          })
        })
      },
      // 删除
      deleteHandle (id) {
        this.$confirm(`确定进行删除操作?`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$http({
            url: this.$http.adornUrl('/game/student/'+id),
            method: 'delete',
            data: this.$http.adornData({})
          }).then(({ data }) => {
            this.$message({
              message: '操作成功',
              type: 'success',
              duration: 1500,
              onClose: () => {
                this.getDataList()
              }
            })
          })
        }).catch(() => { })
      },
    }
  }
</script>
